<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>我是a页面</h1>
    颜色<input type="text" class="color" /> 宽度<input type="text" class="w" />
    高度<input type="text" class="h" />
    <button>点我跳转到b页面</button>
    <script>
      var btn = document.querySelector("button");
      var colorEle = document.querySelector(".color");
      var widthEle = document.querySelector(".w");
      var heightEle = document.querySelector(".h");
      btn.onclick = function () {
        var colorVal = colorEle.value;
        var widthVal = widthEle.value;
        var heightVal = heightEle.value;

        //注意: queryString 参数无论是数字还是字符串都不需要加引号
        // window.location.href = "./b.html?color=" + colorVal;
        //
        //

        //
        //扩展
        //跨页面传递对象
        //   获取参数  当成配置项 保存起来
        var config = {
          color: colorVal,
          w: widthVal,
          h: heightVal,
        };
        console.log(config);
        window.location.href =
          "./b.html?color=" +
          config.color +
          "&w=" +
          config.w +
          "&h=" +
          config.h;
      };
    </script>
  </body>
</html>
